<template>
  <div class="container box">
    <ul class="myTabs">
      <li v-for="item in tabs" :key="item.key">
        <router-link
          :class="item.key === tabs[0].key ? 'act': ''"
          :to="{ name: item.key }"
        >{{item.tab}}</router-link>
      </li>
    </ul>
    <div class="loginBox">
      <a-form
        :form="form"
        :colon="false"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        @submit="submit"
      >
        <a-row>
          <a-col :span="8">
            <a-form-item label="用户名">
              <a-input
                v-decorator="['userName', { rules: [{ required: true, message: '请输入用户名' }] }]"
                placeholder="请输入用户名"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="密码">
              <a-input
                v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
                type="password"
                placeholder="请输入密码"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="验证码">
              <a-input
                v-decorator="['verificationCode', { rules: [{ required: true, message: '请输入验证码' }] }]"
                placeholder="请输入验证码"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <div class="svgCaptcha" v-html="svgCaptcha" @click="getSvgCaptcha"></div>
          </a-col>
        </a-row>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            立即登录
          </a-button>
          <router-link :to="{ name: 'forget' }">
            <a-button type="link">
              忘记密码？
            </a-button>
          </router-link>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { getCode } from '@/services/login'
import { LOGIN_TABS } from '@/utils/const'

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'login' }),
      svgCaptcha: '',
      tabs: LOGIN_TABS
    }
  },
  mounted () {
    this.getSvgCaptcha()
  },
  methods: {
    getSvgCaptcha () {
      getCode().then(({ code, data }) => {
        if (code === 200) {
          this.svgCaptcha = data
        }
      })
    },
    submit () {}
  }
}
</script>
